﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="clr-namespace:Pomodoro.Oob.Controls" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:Pomodoro_ViewModels="clr-namespace:Pomodoro.ViewModels;assembly=Pomodoro.ViewModels" xmlns:MvvmFx_Common_Helpers="clr-namespace:MvvmFx.Common.Helpers;assembly=MvvmFx.Common" xmlns:Converters="clr-namespace:Pomodoro.Oob.Converters" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="Pomodoro.Oob.MainPage" 
    mc:Ignorable="d"   
    Width="816"
    Height="638"  >

    <UserControl.Resources>

        <Converters:StringToImageConverter x:Key="stringToImageConverter" />

        <Pomodoro_ViewModels:AppViewModel x:Key="AppViewModelDataSource" d:IsDataSource="True"/>

        <DataTemplate x:Key="PersonViewModelTemplate">
            <Grid Margin="0,5,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="5,0,0,0">
                    <TextBlock Text="{Binding Name}" 
				
    					Style="{StaticResource ListBoxItemHeading1}" Foreground="{StaticResource DarkControlForegroundBrush}" />
                    <TextBlock Text="{Binding Role}" 
    					Foreground="{StaticResource DarkControlHighlight}" Style="{StaticResource ListBoxItemHeading2}" />

                </StackPanel>
                <Image Source="{Binding Photo, Converter={StaticResource stringToImageConverter}}" Stretch="UniformToFill" Margin="5">
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveSetTagBehavior Tag="DataContext"/>
                    </i:Interaction.Behaviors>
                </Image>
            </Grid>
        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" d:DataContext="{Binding Source={StaticResource SampleAppViewModel}}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="DetailsStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="CurrentTask">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CurrentGrid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TaskListGrid" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="TaskList">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CurrentGrid" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TaskListGrid" d:IsOptimized="True"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="TaskListGrid">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Visible</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="72"/>
            <RowDefinition/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <controls:TiledBackground SourceUri="/Pomodoro.Oob;component/Images/backgroundtexture.png" Grid.RowSpan="4" Grid.ColumnSpan="2" d:LayoutOverrides="GridBox" />
        <Image Source="/Pomodoro.Oob;component/Images/backgroundshadow.png" Stretch="Fill" Grid.RowSpan="4" Grid.ColumnSpan="2" d:LayoutOverrides="GridBox" />

        <controls:ControlBar VerticalAlignment="Top" Title="Pomodoro.OOB" Grid.ColumnSpan="2" Margin="0,0,-0,0"/>
        <TextBlock 
            		FontSize="40" Text="Team Pomodoro" TextWrapping="Wrap" VerticalAlignment="Center" d:LayoutOverrides="Height, GridBox" Style="{StaticResource ApplicationNameStyle}" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" Margin="20,0,0,0"/>
        <ListBox x:Name="listBox" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Margin="20,0,10,0" 
            		ItemTemplate="{StaticResource PersonViewModelTemplate}" 
            		ItemsSource="{Binding PersonViewModels}" 
            		ItemContainerStyle="{StaticResource ListBoxItemStyle}" Background="{StaticResource DarkBackground}" BorderBrush="{StaticResource DarkBorder}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
            		SelectedItem="{Binding PersonViewModels.SelectedItem, Mode=TwoWay}"
                         />
        
        <StackPanel Height="36" Orientation="Horizontal" Grid.Row="2" VerticalAlignment="Bottom" d:LayoutOverrides="Width" HorizontalAlignment="Center" Margin="10,0,0,20">
        	<Button FontSize="21.333" HorizontalAlignment="Left" Width="40" Command="{Binding AddPerson}" Margin="0,0,5,0" Padding="0">
        		<Path Data="M7.34375,13.655834 L9.546875,13.655834 L9.546875,19.015209 L15,19.015209 L15,21.218334 L9.546875,21.218334 L9.546875,26.608959 L7.34375,26.608959 L7.34375,21.218334 L1.90625,21.218334 L1.90625,19.015209 L7.34375,19.015209 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Width="13.094" Height="12.467" Fill="{StaticResource ControlForeground}">
        			<Path.RenderTransform>
        				<TransformGroup>
        					<ScaleTransform/>
        					<SkewTransform/>
        					<RotateTransform/>
        					<TranslateTransform/>
        				</TransformGroup>
        			</Path.RenderTransform>
        		</Path>
        	</Button>
        	<Button FontSize="21.333" Width="40" Command="{Binding RemovePerson}" Margin="5,0,0,0" Padding="0">
        		<Path Data="M2.484375,19.405834 L9.171875,19.405834 L9.171875,22.140209 L2.484375,22.140209 z" Height="2.734" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Width="6.688" Fill="{StaticResource ControlForeground}">
        			<Path.RenderTransform>
        				<TransformGroup>
        					<ScaleTransform/>
        					<SkewTransform/>
        					<RotateTransform/>
        					<TranslateTransform/>
        				</TransformGroup>
        			</Path.RenderTransform>
        		</Path>
        	</Button>
        </StackPanel>

        <Border Grid.Column="1" Grid.Row="2"
            		DataContext="{Binding PersonViewModels.SelectedItem}" d:DataContext="{Binding PersonViewModels[0]}"
            		Background="{StaticResource DarkBackground}" BorderBrush="{StaticResource DarkBorder}" Margin="10,0,20,0" BorderThickness="1" >
            <i:Interaction.Behaviors>
                <ei:FluidMoveBehavior Duration="0:0:0.3" InitialTag="DataContext">
                    <ei:FluidMoveBehavior.EaseY>
                        <CircleEase EasingMode="EaseInOut"/>
                    </ei:FluidMoveBehavior.EaseY>
                    <ei:FluidMoveBehavior.EaseX>
                        <CircleEase EasingMode="EaseInOut"/>
                    </ei:FluidMoveBehavior.EaseX>
                </ei:FluidMoveBehavior>
            </i:Interaction.Behaviors>

            <Grid x:Name="DetailsGrid" Opacity="1" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition/>
                    <RowDefinition Height="80"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="120"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Name}" Style="{StaticResource Heading1}" VerticalAlignment="Center"/>
                <Image Grid.Row="1" Source="{Binding Photo, Converter={StaticResource stringToImageConverter}}" Grid.Column="2" Margin="0,-4,0,-50" Opacity="0.8" Width="80" VerticalAlignment="Top">
                	<Image.Effect>
                		<DropShadowEffect BlurRadius="1" Color="{StaticResource ColorForegroundShadowColor}" Direction="90" Opacity="0.5" ShadowDepth="1"/>
                	</Image.Effect>
                </Image>
                <Grid x:Name="CurrentGrid" Grid.Column="1" Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="34"/>
                        <RowDefinition Height="34"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="1" VerticalAlignment="Center" Text="Name"/>
                    <TextBlock Text="Role"  Grid.Row="2" VerticalAlignment="Center"/>
                    <TextBlock  Text="25:00" TextWrapping="Wrap" FontFamily="/Pomodoro.Oob;component/Fonts/Fonts.zip#DS-Digital" FontSize="64" Grid.Row="4" VerticalAlignment="Center" Foreground="#FFA0BB0E" Grid.Column="1" Margin="-2,0,0,0"/>
                    <Button Content="Start Timer" Grid.Column="1" Grid.Row="4" Style="{StaticResource GreenButton}" HorizontalAlignment="Right" VerticalAlignment="Center" Height="40"/>
                    <TextBlock x:Name="CurrentTaskText" Grid.Row="5" TextWrapping="Wrap" d:LayoutOverrides="Width, Height" Text="{Binding CurrentTask}" VerticalAlignment="Center" Grid.Column="1" Foreground="{StaticResource ControlHighlight}"/>
                    <controls:HorizontalLine Grid.ColumnSpan="2" VerticalAlignment="Center"/>
                    <controls:HorizontalLine Grid.ColumnSpan="2" VerticalAlignment="Center" Grid.Row="3"/>

                    <ComboBox 
            					ItemsSource="{Binding Roles}" SelectedItem="{Binding Role, Mode=TwoWay}"
            					Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" Height="24"/>

                    <TextBox  Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center"/>
                    <controls:HorizontalLine Grid.ColumnSpan="2" VerticalAlignment="Top" Grid.Row="6" Margin="0,20,0,0"/>
                    <TextBlock Grid.Row="4" TextWrapping="Wrap" Grid.ColumnSpan="2" VerticalAlignment="Top" Margin="0,9,0,0" d:LayoutOverrides="Width" Text="Current Task"/>
                </Grid>
                <Grid x:Name="TaskListGrid" Grid.Column="1" Grid.Row="2" Opacity="0" Visibility="Collapsed">
                    <Grid.ColumnDefinitions>
                    	<ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                    	<RowDefinition Height="40"/>
                    	<RowDefinition Height="220"/>
                    	<RowDefinition/>
                    </Grid.RowDefinitions>
                	<controls:HorizontalLine VerticalAlignment="Center"/>
                	<controls:HorizontalLine VerticalAlignment="Top" Grid.Row="2" Margin="0,22,0,0"/>
                	<sdk:DataGrid ItemsSource="{Binding Tasks}" Grid.Row="1" Margin="0,5,0,0" Background="{StaticResource ControlBackgroundNormal}"
                		IsReadOnly="True"
                		AutoGenerateColumns="False"
                		CanUserSortColumns="False">
                		<sdk:DataGrid.Columns>

                			<sdk:DataGridTextColumn Binding="{Binding Description}" Header="Description" Width="*" />
                			<sdk:DataGridTextColumn Binding="{Binding NumberDone}" Header="Done" />
                			<sdk:DataGridTextColumn Binding="{Binding NumberEstimated}" Header="Estimated" />

                		</sdk:DataGrid.Columns>
                	</sdk:DataGrid>
                </Grid>
                <StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" d:LayoutOverrides="GridBox">
                    <ToggleButton Content="Task List" Margin="0,0,5,0" Style="{StaticResource DetailsToggleStyle}" Width="80" Height="36">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Checked">
                                <ei:GoToStateAction StateName="TaskList"/>
                            </i:EventTrigger>
                            <i:EventTrigger EventName="Unchecked">
                                <ei:GoToStateAction StateName="CurrentTask"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ToggleButton>
                    <Button Width="75" Style="{StaticResource BlueButton}" Margin="5,0,0,0">
                        <Path Data="M5.2220054,11.397631 L5.2220054,15.163906 L7.3125005,15.163906 L7.3125005,11.397631 z M3.9694011,3.4672918 L3.9694011,8.4777088 C3.9694009,8.6131248 4.0047097,8.7160988 4.0753279,8.7866268 C4.1459455,8.8571568 4.2490506,8.8924217 4.3846436,8.8924217 L11.078247,8.8924217 C11.355076,8.8924217 11.49349,8.7515831 11.49349,8.4699059 L11.49349,3.4672918 z M2.3020835,3.4672918 C2.0199652,3.4672928 1.8789063,3.6054869 1.8789064,3.8818731 L1.8789064,13.738857 L3.3007815,15.163906 L4.807292,15.163906 L4.807292,11.406094 C4.807292,11.123976 4.9455299,10.982917 5.2220054,10.982917 L10.232422,10.982917 C10.51454,10.982917 10.6556,11.123976 10.6556,11.406094 L10.6556,15.163906 L13.160808,15.163906 C13.301867,15.163906 13.40625,15.128642 13.473959,15.058112 C13.541667,14.987582 13.575521,14.884609 13.575521,14.749193 L13.575521,3.8820047 C13.575521,3.6055307 13.437284,3.4672928 13.160808,3.4672918 L11.908203,3.4672918 L11.908203,8.4704342 C11.908203,8.7014198 11.826389,8.8986158 11.662761,9.0620232 C11.499132,9.2254314 11.301649,9.3071356 11.070313,9.3071356 L4.3841147,9.3071356 C4.1527777,9.3071356 3.9567056,9.2254314 3.7958987,9.0620232 C3.6350913,8.8986158 3.5546877,8.7014198 3.5546877,8.4704342 L3.5546877,3.4672918 z M2.3020835,3.052578 L13.160808,3.052578 C13.392144,3.0525789 13.588217,3.1329823 13.749024,3.2937889 C13.909832,3.4545965 13.990235,3.6506681 13.990235,3.8820047 L13.990235,14.740729 C13.990235,14.972066 13.909832,15.169549 13.749024,15.333178 C13.588217,15.496806 13.392144,15.57862 13.160808,15.57862 L3.1315105,15.57862 L1.4641927,13.908525 L1.4641927,3.8817406 C1.4641927,3.6504917 1.5460069,3.4544859 1.7096355,3.2937231 C1.8732638,3.1329603 2.0707464,3.0525789 2.3020835,3.052578 z" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Height="23.947" Width="23.947">
                            <Path.Fill>
                                <SolidColorBrush Color="White">
                                    <SolidColorBrush.RelativeTransform>
                                        <MatrixTransform Matrix="Identity"/>
                                    </SolidColorBrush.RelativeTransform>
                                    <SolidColorBrush.Transform>
                                        <MatrixTransform Matrix="Identity"/>
                                    </SolidColorBrush.Transform>
                                </SolidColorBrush>
                            </Path.Fill>
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Button>
                </StackPanel>
            </Grid>

        </Border>
    </Grid>
</UserControl>